<template>
  <div>
    <span>{{count}}</span> |
    <span>{{double}}</span> <br>
    <button @click="changecount">增加</button>
  </div>
</template>

<script>
  //ref接收一个参数 返回一个响应式对象
  //computed是一个函数接收一个参数是函数
  import { computed, reactive, toRefs, onMounted } from 'vue'
  export default {
    setup() {
      
      const data = reactive({
        count: 0,
        double: computed(() => {
          return data.count * 2
        }),
        changecount: () => {
          data.count++
        },
      })
      onMounted(() => {
        data.count = 8
      })
      const result = toRefs(data)
      return {
        ...result,
      }
    },
  }
</script>